<template>
  <div class="content">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="中心简介" name="1"> </el-tab-pane>
      <el-tab-pane label="能力展示" name="2">
        <div class="content-main" v-if="detailsData">
          <div class="list-wrap">
            <div class="list-wrap-title">检定/校准服务</div>
            <div class="list-wrap-block">
              <div
                class="list-info"
                @click="openView(index, 'appraisalServiceModels')"
                :class="{ 'list-info-active': listItemActive == index }"
                v-for="(item, index) in detailsData.appraisalServiceModels"
                :key="index"
              >
                <div class="list-info-img">
                  <img :src="item.pic" alt="" width="140px" height="100px" />
                  <div class="list-title">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="list-wrap">
            <div class="list-wrap-title">检测服务</div>
            <div class="list-wrap-block">
              <div
                class="list-info"
                @click="openView(index, 'detectionServiceModels')"
                v-for="(item, index) in detailsData.detectionServiceModels"
                :key="index"
              >
                <div class="list-info-img">
                  <img :src="item.pic" alt="" width="140px" height="100px" />
                  <div class="list-title">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="list-wrap">
            <div class="list-wrap-title">计量标准</div>
            <div class="list-wrap-block">
              <div
                class="list-info"
                @click="openView(index, 'measuringStandardModels')"
                v-for="(item, index) in detailsData.measuringStandardModels"
                :key="index"
              >
                <div class="list-info-img">
                  <img :src="item.pic" alt="" width="140px" height="100px" />
                  <div class="list-title">
                    {{ item.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <Capacity v-if="activeName == '1' && detailsData" :detailsData="detailsData"></Capacity>
  </div>
</template>
<script setup>
import Capacity from './components/Capacity/index.vue'
import { cmsCentreBlurbDetailsDetail } from '@/api'

const activeName = ref('1')
const queryParams = reactive({
  name: '',
  pageNum: 1,
  pageSize: 10,
  total: 0
})
const router = useRouter()
const listItemActive = ref(0)
function openView(index, type) {
  // centerIntroductoryStore().setData(val)
  router.push({ path: '/capacityDetails', query: { id: route.query.id, index: index, type: type } })
}
function handleClick() {}
function currentChange(val) {
  queryParams.pageNum = val
  getList()
}
const route = useRoute()
const detailsData = ref(null)
function getDetails() {
  cmsCentreBlurbDetailsDetail({ id: route.query.id }).then(({ data }) => {
    if (data) {
      detailsData.value = data
    }
  })
}
onMounted(() => {
  getDetails()
})
</script>
<style lang="scss" scoped>
.content {
  background-color: #f6faff;

  :deep(.el-tabs__nav) {
    width: 100%;
    justify-content: center;
  }

  :deep(.el-tabs__content) {
    overflow: hidden;
  }
}

.content-main {
  width: 1200px;
  // height: 1350px;
  margin: auto;

  .list-wrap {
    width: 100%;
    margin-bottom: 20px;
    padding: 0 20px;
    padding-bottom: 10px;
    background-color: #fff;

    .list-wrap-block {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .list-wrap-block > * {
      width: 18%;
      box-sizing: border-box;
    }

    .list-wrap-title {
      display: flex;
      align-items: center;
      height: 40px;
      font-size: 18px;
      border-bottom: 1px solid #ebedf0;
    }

    .list-info {
      margin: 10px;

      .list-info-img {
        padding: 10px 20px;
        border: 1px solid #ebedf0;
        font-size: 13px;
        text-align: center;

        img {
          margin: 0 auto;
        }
      }

      .list-title {
        width: 100%;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        white-space: nowrap;
        //两行显示
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .list-info-active {
      background: #1d5ede;
      color: #fff;
      cursor: pointer;
    }

    .list-info-province {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 180px;
      margin-bottom: 20px;
      background: url('@/assets/images/province-bg.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
